<template>
  <view class="center-detail-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-inner">
        <view class="back-btn" @click="handleBack">
          <FaIcon name="arrow-left" color="#1f2937" :size="36" />
        </view>
        <text class="header-title">{{ centerDetail.title }}</text>
        <view class="share-btn" @click="handleShare">
          <FaIcon name="share" color="#1f2937" :size="36" />
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="content-scroll">
      <!-- 服务头部卡片 -->
      <view class="header-card">
        <view class="card-bg">
          <view class="bg-circle circle-1"></view>
          <view class="bg-circle circle-2"></view>
        </view>
        
        <view class="card-content">
          <view class="service-info">
            <view class="service-icon">
              <FaIcon :name="centerDetail.icon" color="#ffffff" :size="64" />
            </view>
            <view class="service-main">
              <text class="service-name">{{ centerDetail.title }}</text>
              <view class="rating-row">
                <FaIcon v-for="n in 4" :key="n" name="star" color="#fbbf24" :size="24" />
                <FaIcon name="star-half-o" color="#fbbf24" :size="24" />
                <text class="rating-text">4.8</text>
              </view>
            </view>
          </view>
          
          <view class="stats-grid">
            <view class="stat-item">
              <text class="stat-value">2.6k</text>
              <text class="stat-label">使用次数</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">98%</text>
              <text class="stat-label">满意度</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">586</text>
              <text class="stat-label">评价数</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 快速操作按钮 -->
      <view class="quick-actions">
        <view class="action-item" @click="handleConsult">
          <view class="action-icon icon-primary">
            <FaIcon name="comments" color="#10b981" :size="36" />
          </view>
          <text class="action-text">在线咨询</text>
        </view>
        <view class="action-item" @click="handleFavorite">
          <view class="action-icon icon-accent">
            <FaIcon name="heart" color="#f59e0b" :size="36" />
          </view>
          <text class="action-text">收藏</text>
        </view>
        <view class="action-item" @click="handleCall">
          <view class="action-icon icon-secondary">
            <FaIcon name="phone" color="#06b6d4" :size="36" />
          </view>
          <text class="action-text">电话</text>
        </view>
        <view class="action-item" @click="handleReserve">
          <view class="action-icon icon-purple">
            <FaIcon name="calendar" color="#a855f7" :size="36" />
          </view>
          <text class="action-text">预约</text>
        </view>
      </view>

      <!-- 服务介绍 -->
      <view class="section intro-section">
        <view class="section-card">
          <view class="section-header">
            <view class="header-bar"></view>
            <text class="header-title">服务介绍</text>
          </view>
          <text class="intro-text">{{ centerDetail.description }}</text>
        </view>
      </view>

      <!-- 服务特色 -->
      <view class="section features-section">
        <view class="section-card">
          <view class="section-header">
            <view class="header-bar"></view>
            <text class="header-title">服务特色</text>
          </view>
          
          <view class="features-list">
            <view 
              v-for="(item, index) in centerDetail.features" 
              :key="index"
              :class="['feature-item', item.colorClass]"
            >
              <view class="feature-icon">
                <FaIcon name="check-circle" :color="item.color" :size="36" />
              </view>
              <view class="feature-content">
                <text class="feature-title">{{ item.title }}</text>
                <text class="feature-desc">{{ item.desc }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务流程 -->
      <view class="section process-section">
        <view class="section-card">
          <view class="section-header">
            <view class="header-bar"></view>
            <text class="header-title">服务流程</text>
          </view>
          
          <view class="process-list">
            <view class="process-line"></view>
            <view 
              v-for="(item, index) in processSteps" 
              :key="index"
              class="process-item"
            >
              <view class="step-number">
                <text class="number-text">{{ index + 1 }}</text>
              </view>
              <view class="step-content">
                <text class="step-title">{{ item.title }}</text>
                <text class="step-desc">{{ item.desc }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 用户评价 -->
      <view class="section reviews-section">
        <view class="reviews-header">
          <text class="reviews-title">用户评价</text>
          <text class="view-all" @click="handleViewAllReviews">查看全部 →</text>
        </view>
        
        <view class="reviews-list">
          <view 
            v-for="item in reviews" 
            :key="item.id"
            class="review-item"
          >
            <view class="review-header">
              <view :class="['user-avatar', item.avatarClass]">
                <text class="avatar-text">{{ item.name.charAt(0) }}</text>
              </view>
              <view class="review-info">
                <view class="info-top">
                  <text class="user-name">{{ item.name }}</text>
                  <view class="star-row">
                    <FaIcon v-for="n in item.rating" :key="n" name="star" color="#fbbf24" :size="20" />
                    <FaIcon v-for="n in (5 - item.rating)" :key="'empty-' + n" name="star-o" color="#d1d5db" :size="20" />
                  </view>
                </view>
                <text class="review-text">{{ item.comment }}</text>
                <text class="review-time">{{ item.time }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 相关推荐 -->
      <view class="section recommend-section">
        <view class="recommend-header">
          <text class="recommend-title">相关推荐</text>
          <text class="view-more" @click="handleViewMore">更多 →</text>
        </view>
        
        <view class="recommend-list">
          <view 
            v-for="item in relatedServices" 
            :key="item.id"
            class="recommend-item"
            @click="handleViewRelated(item)"
          >
            <image :src="item.image" mode="aspectFill" class="item-image"></image>
            <view class="item-content">
              <view class="item-top">
                <text class="item-title">{{ item.title }}</text>
                <view :class="['item-tag', item.tagClass]">
                  <text class="tag-text">{{ item.tag }}</text>
                </view>
              </view>
              <text class="item-desc">{{ item.description }}</text>
              <view class="item-footer">
                <view class="rating-info">
                  <FaIcon name="star" color="#fbbf24" :size="20" />
                  <text class="rating-value">{{ item.rating }}分</text>
                </view>
                <text class="detail-link">了解详情 →</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="bar-inner">
        <button class="use-btn" @click="handleUse">
          <FaIcon name="check-circle" color="#ffffff" :size="32" style="margin-right: 12rpx;" />
          <text class="btn-text">立即使用</text>
        </button>
        <view class="service-btn" @click="handleService">
          <FaIcon name="comment" color="#1f2937" :size="36" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import FaIcon from '@/components/common/FaIcon.vue'

const centerId = ref('')

// 服务中心详情
const centerDetail = ref({
  id: 1,
  title: '办公场地',
  icon: 'building',
  description: '为农业企业提供专业的办公场地租赁服务，配套设施齐全，环境优美，交通便利。',
  features: [
    {
      title: '专业团队',
      desc: '拥有丰富经验的专业团队提供服务',
      color: '#10b981',
      colorClass: 'bg-primary'
    },
    {
      title: '高效便捷',
      desc: '简化流程，快速响应客户需求',
      color: '#06b6d4',
      colorClass: 'bg-secondary'
    },
    {
      title: '价格透明',
      desc: '明码标价，无隐藏费用',
      color: '#f59e0b',
      colorClass: 'bg-accent'
    },
    {
      title: '售后保障',
      desc: '完善的售后服务体系',
      color: '#a855f7',
      colorClass: 'bg-purple'
    }
  ]
})

// 服务流程
const processSteps = ref([
  { title: '提交需求', desc: '填写需求表单，提交服务申请' },
  { title: '方案沟通', desc: '专业顾问与您沟通具体方案' },
  { title: '签约合作', desc: '确认方案，签订服务协议' },
  { title: '服务交付', desc: '开始提供专业服务支持' }
])

// 用户评价
const reviews = ref([
  {
    id: 1,
    name: '张*明',
    rating: 5,
    comment: '服务非常专业，解决了我们的办公需求，环境很好，推荐！',
    time: '2天前',
    avatarClass: 'avatar-primary'
  },
  {
    id: 2,
    name: '李*华',
    rating: 4,
    comment: '性价比很高，工作人员态度很好，配套设施齐全。',
    time: '5天前',
    avatarClass: 'avatar-secondary'
  }
])

// 相关推荐
const relatedServices = ref([
  {
    id: 2,
    title: '金融贷款服务',
    description: '为农业企业提供低息贷款服务，快速审批...',
    rating: 4.9,
    tag: '热门',
    tagClass: 'tag-hot',
    image: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=150&h=150&fit=crop'
  },
  {
    id: 3,
    title: '劳务派遣服务',
    description: '专业的劳务派遣服务，解决用工难题...',
    rating: 4.7,
    tag: '推荐',
    tagClass: 'tag-recommend',
    image: 'https://images.unsplash.com/photo-1556761175-4b46a572b786?w=150&h=150&fit=crop'
  }
])

onLoad((options) => {
  if (options.id) {
    centerId.value = options.id
    // TODO: 根据ID加载服务中心详情
  }
})

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleShare = () => {
  uni.showToast({ title: '分享功能开发中...', icon: 'none' })
}

const handleConsult = () => {
  uni.showToast({ title: '在线咨询功能开发中...', icon: 'none' })
}

const handleFavorite = () => {
  uni.showToast({ title: '收藏功能开发中...', icon: 'none' })
}

const handleCall = () => {
  uni.showToast({ title: '电话功能开发中...', icon: 'none' })
}

const handleReserve = () => {
  uni.showToast({ title: '预约功能开发中...', icon: 'none' })
}

const handleViewAllReviews = () => {
  uni.showToast({ title: '查看全部评价...', icon: 'none' })
}

const handleViewMore = () => {
  uni.showToast({ title: '查看更多推荐...', icon: 'none' })
}

const handleViewRelated = (item) => {
  uni.redirectTo({ url: `/pages/yjyny/service/center/detail?id=${item.id}` })
}

const handleUse = () => {
  uni.showToast({ title: '立即使用功能开发中...', icon: 'success' })
}

const handleService = () => {
  uni.showToast({ title: '客服功能开发中...', icon: 'none' })
}
</script>

<style lang="scss" scoped>
.center-detail-page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f8fafc, #f1f5f9, #f9fafb);
  padding-bottom: 160rpx;
}

// 顶部导航栏
.page-header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12rpx);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
}

.back-btn,
.share-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active,
.share-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
  margin: 0 32rpx;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 120rpx - 160rpx);
}

// 服务头部卡片
.header-card {
  position: relative;
  margin: 32rpx;
  border-radius: 48rpx;
  background: linear-gradient(to bottom right, #10b981, #059669, #047857);
  padding: 48rpx;
  box-shadow: 0 16rpx 48rpx rgba(16, 185, 129, 0.3);
  overflow: hidden;
}

.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}

.bg-circle {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  filter: blur(40rpx);
  
  &.circle-1 {
    top: -80rpx;
    right: -80rpx;
    width: 320rpx;
    height: 320rpx;
  }
  
  &.circle-2 {
    bottom: -80rpx;
    left: -80rpx;
    width: 256rpx;
    height: 256rpx;
  }
}

.card-content {
  position: relative;
  z-index: 1;
}

.service-info {
  display: flex;
  align-items: flex-start;
  gap: 32rpx;
  margin-bottom: 32rpx;
}

.service-icon {
  width: 128rpx;
  height: 128rpx;
  border-radius: 32rpx;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.service-main {
  flex: 1;
}

.service-name {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 16rpx;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.rating-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 8rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12rpx);
  border-radius: 24rpx;
  text-align: center;
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.7);
}

// 快速操作
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16rpx;
  padding: 32rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  border: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  transition: all 0.3s;
}

.action-item:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.action-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.icon-primary {
    background-color: rgba(16, 185, 129, 0.1);
  }
  
  &.icon-accent {
    background-color: rgba(245, 158, 11, 0.1);
  }
  
  &.icon-secondary {
    background-color: rgba(6, 182, 212, 0.1);
  }
  
  &.icon-purple {
    background-color: rgba(168, 85, 247, 0.1);
  }
}

.action-text {
  font-size: 22rpx;
  color: #6b7280;
}

// 通用Section
.section {
  padding: 0 32rpx 32rpx;
}

.section-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.header-bar {
  width: 8rpx;
  height: 40rpx;
  background-color: #10b981;
  border-radius: 4rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

// 服务介绍
.intro-text {
  display: block;
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.8;
}

// 服务特色
.features-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  padding: 24rpx;
  border-radius: 24rpx;
  border: 2rpx solid rgba(0, 0, 0, 0.05);
  
  &.bg-primary {
    background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
  }
  
  &.bg-secondary {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.05));
  }
  
  &.bg-accent {
    background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
  }
  
  &.bg-purple {
    background: linear-gradient(to bottom right, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.05));
  }
}

.feature-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 8rpx;
}

.feature-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.feature-desc {
  font-size: 24rpx;
  color: #6b7280;
  line-height: 1.6;
}

// 服务流程
.process-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48rpx;
}

.process-line {
  position: absolute;
  left: 48rpx;
  top: 64rpx;
  bottom: 64rpx;
  width: 4rpx;
  background: linear-gradient(to bottom, #10b981, #34d399, #10b981);
}

.process-item {
  display: flex;
  align-items: flex-start;
  gap: 32rpx;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  background: linear-gradient(to bottom right, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
}

.number-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
}

.step-content {
  flex: 1;
  padding-top: 16rpx;
}

.step-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.step-desc {
  display: block;
  font-size: 24rpx;
  color: #6b7280;
  line-height: 1.5;
}

// 用户评价
.reviews-header,
.recommend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  margin-bottom: 24rpx;
}

.reviews-title,
.recommend-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

.view-all,
.view-more {
  font-size: 24rpx;
  color: #10b981;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 0 32rpx 32rpx;
}

.review-item {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.review-header {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &.avatar-primary {
    background: linear-gradient(to bottom right, #10b981, #059669);
  }
  
  &.avatar-secondary {
    background: linear-gradient(to bottom right, #06b6d4, #0891b2);
  }
}

.avatar-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}

.review-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.user-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
}

.star-row {
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.review-text {
  display: block;
  font-size: 24rpx;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.review-time {
  font-size: 22rpx;
  color: #9ca3af;
}

// 相关推荐
.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 0 32rpx 32rpx;
}

.recommend-item {
  display: flex;
  gap: 24rpx;
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  overflow: hidden;
  transition: all 0.3s;
}

.recommend-item:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.item-image {
  width: 192rpx;
  height: 192rpx;
  border-radius: 24rpx;
  flex-shrink: 0;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
  flex: 1;
  min-width: 0;
}

.item-tag {
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
  margin-left: 16rpx;
  
  &.tag-hot {
    background-color: rgba(16, 185, 129, 0.1);
    
    .tag-text {
      color: #10b981;
    }
  }
  
  &.tag-recommend {
    background-color: rgba(245, 158, 11, 0.1);
    
    .tag-text {
      color: #f59e0b;
    }
  }
}

.tag-text {
  font-size: 22rpx;
  font-weight: 500;
}

.item-desc {
  font-size: 24rpx;
  color: #9ca3af;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rating-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.rating-value {
  font-size: 24rpx;
  color: #6b7280;
}

.detail-link {
  font-size: 28rpx;
  font-weight: 500;
  color: #10b981;
}

// 底部安全区
.safe-bottom {
  height: 32rpx;
}

// 底部操作栏
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 2rpx solid #f3f4f6;
  padding: 24rpx 32rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.04);
  z-index: 20;
}

.bar-inner {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.use-btn {
  flex: 1;
  height: 96rpx;
  background: linear-gradient(to right, #10b981, #059669);
  border: none;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}

.service-btn {
  width: 96rpx;
  height: 96rpx;
  background-color: #f3f4f6;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.service-btn:active {
  background-color: #e5e7eb;
}
</style>
